<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>查询书目</title>
	<style>
		* {padding: 0; margin: 0}
		ul, li {
			list-style: none;
		}
		li {
			padding: 1rem;
			border: 1px solid #abcdef;
			border-radius: 2rem;
		}
		.cover {
			width: 100%;
			background: #eaeaea;
			height: 4rem;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.container {
			padding-bottom: 4rem;
		}
		#search {
			width: 4rem;
			height: 2rem;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="cover">
			<button id="search">语音识别</button>
		</div>
		<h2 style="text-align: center;">欢迎使用搜索页</h2>
		<ul class="list">
		</ul>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<script type="text/javascript">
		wx.config({
		  debug: trufalsee, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		  appId: "<%= appID %>", // 必填，公众号的唯一标识
		  timestamp: "<%= timestamp %>", // 必填，生成签名的时间戳
		  nonceStr: "<%= noncestr %>", // 必填，生成签名的随机串
		  signature: "<%= signature %>",// 必填，签名
		  jsApiList: [
		  	"startRecord",
		  	"stopRecord",
		  	"translateVoice",
		  	"updateAppMessageShareData"
		  ] // 必填，需要使用的JS接口列表
		});

		wx.ready(function(){
		  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

		  wx.checkJsApi({
			  jsApiList: [
			  	"startRecord",
			  	"stopRecord",
			  	"translateVoice",
			  	"updateAppMessageShareData"
			  ], 
			  success: function(res) {
			  	console.log(res)
			  },
			  fail: function (err) {
			  	console.log(err)
			  }
			});

			let isRecord = false;
			let translateResult = null
		  $("#search").click(function () {
		  	if(!isRecord) {
		  		wx.startRecord()
		  		isRecord = true
		  	} else {
		  		wx.stopRecord({
					  success: function (res) {
					    var localId = res.localId;
					    let html = ""
					    wx.translateVoice({
							  localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
							  isShowProgressTips: 1, // 默认为1，显示进度提示
							  success: function (res) {
								  translateResult = res.translateResult.slice(0,-1)
								  $.ajax({
										url: `/books/search/${translateResult}`,
										type: "get",
										data: {
											voice: 1
										}
									}).then(res => {
										let html = ""
										if(res.total > 0) {
											res.books.forEach(book => {
												html += `
												<h2>${translateResult}</h2>
												<li>
													<div class="title">${book.title}</div>
														<div class="book_info">
															<div class="book_info_left">
																<img src="${book.image}">
															</div>
															<div class="book_info__right">
																<p>作者：${book.author.join("/")}
																</p>
																<p>出版社：${book.publisher}</p>
																<p>译者：${book.translator.join(" / ")}
																</p>
																<p>页数：${book.pages}</p>
																<p>出版年：${book.pubdate}</p>
																<p>定价：${book.price}</p>
															</div>
														</div>`
												
												if(book.summary){
													html += `<details>
															<summary style="font-size:1.2rem;font-weight:600;">内容简介</summary>
															<p>
																${book.summary}
															</p>
														</details>	`
												}

												html += `</li>`
											})
										}else{
											html += `<h2>${translateResult}</h2><p>暂时没有该书目</p>`
										}
										$(".list").html(html)
										wx.updateAppMessageShareData({ 
											title: translateResult, // 分享标题
											desc: '奇文共欣赏，疑义相与析~', // 分享描述
											link: '<%= url %>' + `/books/search/${translateResult}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
											imgUrl: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3200175604,477905664&fm=26&gp=0.jpg', // 分享图标
											success: function () {
											},
											cancel: function () {
											}
										})
									})
							  },
							  fail: function () {
							  	html = `<p>识别失败</p>`
							  	$(".list").html(html)
							  }
							});	    
					  },
					  fail: function () {
						  let html = `<p>识别失败</p>`
							$(".list").html(html)
					  },
					  complete: function () {
					  }
					});
					isRecord = false
		  	}
		  })
		  wx.updateAppMessageShareData({ 
			title: '找你所找，寻你所寻', // 分享标题
			desc: '给我放大镜！！', // 分享描述
			link: '<%= url %>' + '/search', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602916409693&di=665897507339d4aa876e7c730e6da3de&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4', // 分享图标
			success: function () {
			},
			cancel: function () {
			}
		})
		
		});

		wx.error(function(res){
		  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		  console.log(res)
		});
	</script>
</body>
</html>